import { Button, Checkbox, Input, message, Modal} from 'antd'
import React, { useEffect, useState,useContext } from 'react'
import './answer.css'
import '../../Mock/text'
import axios from 'axios'
import Count from './components/count'
import {CountContext} from '../Context/count'

export default function Quiz () {

  const { configData } = useContext(CountContext)
  console.log(configData);
  // console.log(props);
  const [data, setData] = useState({});
  const [url, setUrl] = useState(1);
  const [value, setValue] = useState()
  const [countValue, setCountValue] = useState(0);
  const [onStart, setOnStart] = useState(true)
  // 查看答案提示框
  const [isModalVisible, setIsModalVisible] = useState(false)
  const [Visibled,setVisibled] = useState(true)
  useEffect(() => {
    axios.get('/text' + url).then(res => {
      console.log(res.data);
      setData(res.data.data);
      setValue('')
      // setinputValue('')
    }).catch(error => {
      console.log(error);
      message.warning('没有下一题了')
    })
    return () => {
      //逻辑判断，例如关闭页面需要执行清除定时器或者token
    }
    // 只要url发生变化就会重新执行调用
  }, [url])
  // Checkbox处理程序
  const onChange = (checkedValues) => {
    let resValue = []
    // 校验类型为多选
    if (data.type === '0') {
      resValue = checkedValues

    } else if (data.type === '1') {
      // 判断如果是单选，就把checkedValues的值和勾选过的值作比较然后取反
      checkedValues.map((item) => {
        if (!value.includes(item)) {
          resValue = [item]
        }
        return
      })
    } else if (data.type === '2'){
      // 校验为input填框
      resValue = checkedValues.target.value
    }
    setValue(resValue)
  }
  // 下一步按钮处理程序
  const handlerNext = () => {
    if (!value || value.length === 0) {
      return message.error('单选框和填框不能都为空');
    }
    setUrl(url + 1)
    setCountValue(0)
    setOnStart(true)
    setVisibled(true);
  }
  //查看答案处理事件
  const showModal = () => {
    setIsModalVisible(true);
  }
  const handleOk = () => {
    setIsModalVisible(false)
  }
  const handleCancel = () => {
    setIsModalVisible(false)
  }
  const handlerOnClick = () => {
    setVisibled(false);
 }
  return (
    <div className='roots'>
      <div className='Progress'>
        {/* 计时器 */}
        <Count value={countValue} setCountValue={setCountValue}
          setOnStart={setOnStart} onStart={onStart}  />
      </div>
      {/* 标题 */}
      <div className='question'>
        <h1>
            题目:{data.title}
        </h1>
        {/* 单/多选框 */}
        <div className='adios'>
          {
            (data.type === '0' || data.type === '1') &&
            <Checkbox.Group className='CheckboxGroup'
            options={data.option || []} onChange={onChange}
            value={value}> 
            </Checkbox.Group>
          }
          {/* 填框 */}
           {
            data.type === '2' && 
            <div>
                <Input type='text' className='Frameinput' onChange={onChange} />&nbsp;,&nbsp;
                {data.option[0]?.label}
            </div>
          }
          {/* {
              data.option?.map((item,label)=>{ 
                console.log(item,label);
                return <li key={label}>{item.label}</li>  
            }) 
            } */}
        </div>
      </div>
      {/* 下一页/答案 */}
       <div className='classbtn'> 
        <Button  className='right' type='primary' shape='round' onClick={handlerNext}>下一页</Button>
        <Button  className='left' type='primary' shape='round' onClick={showModal}>查看答案</Button>
      </div>
      <Modal visible={isModalVisible } onOk={handleOk} onCancel={handleCancel}
        cancelText="取消"
        okText="确定" >
        <p>答案:{data.value }</p>
      </Modal>
      <Modal visible={countValue >= configData.count && configData.isAlert === true && Visibled}
         onOk={handlerOnClick} onCancel={handlerOnClick}
        cancelText="取消"
        okText="确定" >
        <p>答案:{data.value }</p>
      </Modal>
    </div>
  )
}
